﻿<%@ page pageEncoding="UTF-8"%>
<%@ include file="/common/validate.jsp"%>
<%@ include file="function.jsp"%>
<%@ include file="../organization/function.jsp"%>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>通讯录</title>
	<link rel="stylesheet" href="/css/public.css?cache=<%=Math.random()%>">
	<link  href="../../hos_manage/images/favicon.ico?cache=<%=Math.random()%>" rel="shortcut icon" type="image/x-icon">
	<link rel="stylesheet" type="text/css" href="../../css/palace/address/address_book.css?a=<%=Math.random()%>">
	<link rel="stylesheet" href="/css/components/address_book.css"/>
	<script src="/js/jquery-1.9.1.min.js"></script>
</head>
<body id="app" v-cloak>
<%@ include file="../../header.jsp"%>
<!--内容-->
<div class="containerone">
	<%@ include file="../../left_menu.jsp"%>
	<!--右边内容-->
	<div class="right_cont">
		<!--右边导航下面内容-->
		<div class="address-book">
			<div class="title">
				<div class="address-left show-block note">
					<span class="hover" @click="homePage()">首页</span>
					<span class="left-distance">></span>
					<span class="left-distance">通讯录列表</span>
				</div>
				<div class="search-input-button">
					<div class="create-member" @click="addMember()">新增成员</div>
					<div class="title-right">
						<input class="show-block" type="text" placeholder="按工号/姓名/科室/标签" @input="searchBlur($event)" @focus="showSearch()"
							   @blur="hideSearch()">
						<img class="show-block" src="../../images/palace/address/search1.png" @click="addressSearch()">
					</div>
					<div class="search-result" v-show="searchInputShow">
						<div class="person" v-show="showSearchResult('user')">
							<div class="person-depart-tag">人员</div>
							<div class="people" v-for="user in searchResult.user" @click="addressSearch(user, 'user')">
								<img class="show-block person-img" src="../../images/palace/message/avator-female.png">
								<div class="show-block result-info" v-html="user.name"></div>
							</div>
						</div>
						<div class="person" v-show="showSearchResult('dept')">
							<div class="person-depart-tag">科室</div>
							<div class="people" v-for="dept in searchResult.dept" @click="addressSearch(dept, 'dept')">
								<img class="show-block person-img" src="../../images/palace/address/ic-file2.png">
								<div class="show-block result-info" v-html="dept.deptName">彭勇</div>
							</div>
						</div>
						<div class="person" v-show="showSearchResult('label')">
							<div class="person-depart-tag">标签</div>
							<div class="people" v-for="label in searchResult.label" @click="addressSearch(label, 'label')">
								<img class="show-block person-img" src="../../images/palace/address/ic-label2.png">
								<div class="show-block result-info" v-html="label.name">彭勇</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="container">
				<div class="position">
					<div class="show-block address-book-left">
						<div class="department-split">科室分类</div>
						<div class="_dept">
							<div class="_dept-title" @click="deptQuery()">
								<span>全院</span>
							</div>
							<div class="_dept-container">
								<deptcategory :list="deptList" :parent="all"></deptcategory>
							</div>
						</div>
					</div>
					<div class="show-block address-book-right">
						<div class="all-operate create">
							<div class="show-block" @click="addressImport()">批量导入</div>
							<div class="show-block address-left" @click="addressOutput()">全部导出</div>
						</div>
						<div class="data-form show-margin-left line">
							<div class="form-title">
								<div class="show-block title-width">工号</div>
								<div class="show-block title-width">姓名</div>
								<div class="show-block title-width">电话</div>
								<div class="show-block title-width">科室</div>
								<div class="show-block title-width">职称</div>
								<div class="show-block title-width">职位</div>
								<div class="show-block title-width">app状态</div>
							</div>ddd
							<div class="form-title bg-white line" @click="showDetailInfo(i)" v-for="i in personList">
								<div class="show-block title-width" v-html="i.employee_id"></div>
								<div class="show-block title-width" v-html="i.name"></div>
								<div class="show-block title-width" v-html="i.phone"></div>
								<div class="show-block title-width" v-html="i.deptName"></div>
								<div class="show-block title-width" v-html="getBasicCategory(i, '职称')"></div>
								<div class="show-block title-width" v-html="getBasicCategory(i, '职位')"></div>
								<div class="show-block title-width" v-html="logined(i)"></div>
							</div>
						</div>
						<pagination :pagecount="page_count" :currentpage="current_page" v-show="showPagination"></pagination>
					</div>
				</div>
				<div class="info-detail" v-show="detailInfoShow">
					<div class="detail-title">
						<div class="show-block">详细信息</div>
						<img class="show-block detail-img" src="../../images/palace/address/xx.png" @click="hideDetailInfo()">
					</div>
					<div class="detail-avatar">
						<img class="show-block left-img" src="../../images/palace/address/login.png">
						<div class="show-block info-middle">
							<div class="name" v-html="nowPerson.name"></div>
							<div class="phone" v-html="nowPerson.phone"></div>
						</div>
						<%--<img class="show-block right-img" src="../../images/palace/address/eye.png">--%>
					</div>
					<div class="piece">
						<div class="light-black infor show-block">工号</div>
						<div class="light-grey infor show-block" v-html="nowPerson.employee_id"></div>
					</div>
					<div class="one-piece">
						<div class="light-black infor show-block">微信</div>
						<div class="light-grey infor show-block" v-html="nowPerson.wechat"></div>
					</div>
					<div class="one-piece">
						<div class="light-black infor show-block">QQ</div>
						<div class="light-grey infor show-block" v-html="nowPerson.qq"></div>
					</div>
					<div class="one-piece">
						<div class="light-black infor show-block">邮箱</div>
						<div class="light-grey infor show-block" v-html="nowPerson.email"></div>
					</div>
					<div class="one-piece">
						<div class="light-black infor show-block">身份证</div>
						<div class="light-grey infor show-block" v-html="nowPerson.card_number"></div>
					</div>
					<div class="one-piece">
						<div class="light-black infor show-block">科室</div>
						<div class="light-grey infor show-block" v-html="nowPerson.deptName"></div>
					</div>
					<div class="one-piece">
						<div class="light-black infor show-block">职称</div>
						<div class="light-grey infor show-block" v-html="getBasicCategory(nowPerson, '职称')"></div>
					</div>
					<div class="one-piece">
						<div class="light-black infor show-block">职位</div>
						<div class="light-grey infor show-block" v-html="getBasicCategory(nowPerson, '职位')"></div>
					</div>
					<div class="one-piece">
						<div class="light-black infor show-block">标签</div>
						<div class="light-grey infor show-block">
							<div class="show-block tag" v-for="tag in nowPerson.extend" v-html="tag.label_name"></div>
						</div>
					</div>
					<div class="one-piece">
						<div class="light-black infor show-block">app</div>
						<div class="light-grey infor show-block" v-html="logined(nowPerson)"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<addmember v-if="addmemberShow"></addmember>
<dangertip v-if="dangerTipShow" :title="dangerTitle"></dangertip>
<meesagetip v-if="messageTipShow" :title="messageTitle"></meesagetip>
</body>
<%@ include file="/components/multi_select.jsp"%>
<%@ include file="/components/single_select.jsp"%>
<%@ include file="/components/address/add_member.jsp"%>
<%@ include file="/components/danger.jsp"%>
<%@ include file="/components/message.jsp"%>
<%@ include file="/components/address/address_category.jsp"%>
<%@ include file="/components/pagination.jsp"%>
<script>
    var state = {
        addmemberShow: false,
        dangerTipShow: false,
        messageTipShow: false,
        dangerTitle: "",
        messageTitle: "",
        searchInputShow: false,
        detailInfoShow: false,
        nowPerson: {},
        deptList: [],
        personList: [],
        choosedDept: 0,
        timeout: {},
        all: {
            id: -1,
        },
        searchResult: {},
        page_count: 0,
        current_page: 1,
        organizationCheck: 0,
    };
    new Vue({
        el: "#app",
        data: state,
        methods: {
            queryDeptAddress: function(then) {
                $.ajax({
                    type: 'POST',
                    url: location.href,
                    data: {
                        act: "addressQueryByPage",
                        deptId: this.choosedDept + "",
                        hospital: HOSPITAL,
                        page_num: this.current_page + "",
                    },
                    success: function(res) {
                        res = JSON.parse(res);
                        then(res);
                    },
                });
            },
            homePage: function () {
				location.href = "../../index.jsp";
            },
            addressOutput: function() {
                $.ajax({
                    type: 'POST',
                    url: location.href,
                    data: {
                        act: "addressOutput",
                        hospital: HOSPITAL,
                    },
                    success: function(res) {
                        res = JSON.parse(res);
                        if (res.errcode == 0) {
                            location.href = res.data;
                        } else {
                            this.danger(res.errmsg);
                        }
                    },
                });
            },
            addressSearch: function(i, name) {
                if (i) {
                    locationHerf("address_search", {
                        info: [i],
                        tag: name
                    });
                } else {
                    locationHerf("address_search", {
                        info: this.searchResult
                    });
                }
            },
            // 判断科室、人员、标签的搜索结果块是否显示
            showSearchResult: function(key) {
                return this.searchResult[key].length > 0;
            },
            showSearch: function() {
                this.searchInputShow = true;
            },
            hideSearch: function() {
                var _this = this;
                setTimeout(function() {
                    _this.searchInputShow = false;
                }, 200)

            },
            // 错误提示
            danger: function(title) {
                this.dangerTitle = title;
                this.dangerTipShow = true;
            },
            // 消息提示
            message: function(title) {
                this.messageTitle = title;
                this.messageTipShow = true;
            },
            // 模糊搜索
            searchBlur: function(event) {
                var value = event.target.value.trim();
                clearTimeout(this.timeout);
                var _this = this;
                this.timeout = setTimeout(function() {
                    if (value == "") {
                        _this.searchResult = {};
                        return;
                    }
                    $.ajax({
                        type: 'POST',
                        url: location.href,
                        data: {
                            act: "fuzzySearch",
                            hospital: HOSPITAL,
                            key: value,
                        },
                        success: function(res) {
                            res = JSON.parse(res);
                            if (res.errcode == 0) {
                                _this.searchResult = res.data;
                            } else {
                                _this.danger(res.errmsg);
                            }
                        },
                    });
                }, 700);
            },
            // 跳转到批量导入页面
            addressImport: function() {
                if (this.organizationCheck == 0) {
				  	locationHerf("/palace/organization/import");
				} else {
					locationHerf("address_import");
				}
            },
            // 关闭展现用户信息
            hideDetailInfo: function() {
                this.detailInfoShow = false;
            },
            // 展现用户的详细信息
            showDetailInfo: function(i) {
                this.detailInfoShow = true;
                this.nowPerson = i;
            },
            // 获取职称、职位等
            getBasicCategory: function(i, name) {
                return i.basic.filter(function(item) {
                    return item.category_name == name;
                }).map(function(item) {
                    return item.label_name;
                }).join("-");
            },
            // 判断是否开通
            logined: function(i) {
                return i.last_ip && "已开通" || "未开通";
            },
            // 添加成员
            addMember: function() {
                if (this.organizationCheck != 0) {
                    this.addmemberShow = true;
                } else {
					this.danger("请先添加组织架构");
                }
            },
            // 查询全院的人的数据
            deptQuery: function() {
                var _this = this;
                this.choosedDept = -1;
                this.queryDeptAddress(function(res) {
                    if (res.errcode == 0) {
                        _this.personList = res.data.user;
                        _this.page_count = res.data.total_page;
                    } else {
                        _this.danger(res.errmsg);
                    }
                });
            },
            changeCheckedDept: function() {
                this.all.checked =! this.all.checked;
                var bool = this.all.checked;
                var deptList = this.deptList;
                function setChecked(list) {
                    if (Array.isArray(list)) {
                        for (var i = 0; i < list.length; i++) {
                            setChecked(list[i]);
                        }
                    } else {
                        list.checked = bool;
                        if (list.sub_dept && list.sub_dept.length > 0) {
                            setChecked(list.sub_dept);
                        }
                    }
                }
                setChecked(deptList);
                this.deptList = deptList;
                event.stopPropagation();
            },
        },
        events: {
            // 关闭添加成员
            closeAddMember: function() {
                this.addmemberShow = false;
            },
            danger: function(title) {
                this.dangerTitle = title;
                this.dangerTipShow = true;
            },
            dangerTipOver: function() {
                this.dangerTipShow = false;
            },
            message: function(title) {
                this.messageTitle = title;
                this.messageTipShow = true;
            },
            messageTipOver: function() {
                this.messageTipShow = false;
            },
            deptQuery: function() {
                var _this = this;
                this.queryDeptAddress(function(res) {
                    if (res.errcode == 0) {
                        _this.personList = res.data.user;
                        _this.page_count = res.data.total_page;
                    } else {
                        _this.danger(res.errmsg);
                    }
                });
            },
            // 分页所触发的方法
            changePage: function(i) {
                this.current_page = i.currentpage;
                this.deptQuery();
            },
			// 添加成员成功
            successAddMember: function() {
				this.message("成员添加成功");
				this.addmemberShow = false;
                this.deptQuery();
			}
        },
		computed: {
            showPagination: function () {
				return this.personList.length == 0;
            },
		},
        ready: function() {
            this.dangerTipShow = false;
            var _this = this;
            $.ajax({
                type: 'POST',
                url: location.href,
                data: {
                    act: "organizationCheck",
                    hospital: HOSPITAL,
                    deptType: "20",
                },
                async: false,
                success: function(res) {
                    res = JSON.parse(res);
                    if (res.errcode == 0) {
                        _this.organizationCheck = res.data;
                    } else {
                        _this.danger(res.errmsg);
                    }
                },
            });
            // 获取科室的组织架构
            $.ajax({
                type: 'POST',
                url: location.href,
                data: {
                    act: "organizationQuery",
                    deptType: "20",
                    hospital: HOSPITAL
                },
                success: function(res) {
                    res = JSON.parse(res);
                    if (res.errcode == 0) {
                        var deptList = res.data;
                        function setChecked(list) {
                            if (Array.isArray(list)) {
                                for (var i = 0; i < list.length; i++) {
                                    setChecked(list[i]);
                                }
                            } else {
                                if (list.sub_dept && list.sub_dept.length > 0) {
                                    list.toggle = 1;
                                    setChecked(list.sub_dept);
                                }
                            }
                        }
                        setChecked(deptList);
                        _this.deptList = deptList;
                        _this.deptQuery(); // 初始获取全院的人员信息
                    } else {
                        _this.danger(res.errmsg);
                    }
                },
            });
        },
        components: {
            addmember: addMember,
            dangertip: dangerTip,
            meesagetip: messageTip,
            deptcategory: deptCategory,
            pagination: pagination,
        }
    });
</script>
</html>
